<template>
  <div>
    <div class="goodsBox">
      <input type="text" >
      商品名称:<el-input v-model="goods.goodsName" placeholder="请输入商品名称" style="width:25%"></el-input>
      商品价格:<el-input-number v-model="goods.goodsPrice" label="请输入商品价格" :min="0"></el-input-number>
      <el-button type="primary" @click="addProduct">添加商品</el-button>
    </div>
    <div class="box">
      <table>
        <thead>
          <tr>
            <th colspan="2">商品列表</th>
            <th colspan="1" style="display:flex; align-items: center;">
              查询:<el-input @input="searchval" v-model="search" placeholder="请输入商品名称" style="width:80%"></el-input>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>操作</td>
          </tr>
          <tr v-if="goodsList1.length==0">
            <td colspan="3">
              <el-empty :image-size="200" description="暂无列表"></el-empty>
            </td>
          </tr>
          <tr v-else v-for="(item,index) in  goodsList1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="index">
            <td>
              <el-input v-model="item.name" placeholder="请输入商品名称" style="width:50%" :disabled='item.isck'></el-input>
            </td>
            <td>
              <el-input v-model="item.price" placeholder="请输入商品单价" style="width:50%" :disabled='item.isck'></el-input>
            </td>
            <td>
              <el-button @click="resve(index)" type="primary" size="mini">{{item.isck==true?'修改商品信息':'确认商品信息'}}</el-button>
              <el-button @click="addToCart(item.name)" type="primary" size="mini">添加到购物车</el-button>
              <el-button @click="delToCart(index)" type="primary" size="mini">删除</el-button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6">
              <el-pagination class="pagination" align="center" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="goodsList1.length">
              </el-pagination>
            </td>
          </tr>
        </tfoot>
      </table>
      <table>
        <thead>
          <tr>
            <th colspan="6">购物车列表</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>全选<input type="checkbox" v-model="isAll" @click="select">
              <el-button @click="delToAll" type="primary" size="mini">删除</el-button>
            </td>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>商品数量</td>
            <td>价格</td>
            <td>操作</td>
          </tr>
          <tr v-if="shopList.length==0">
            <td colspan="6">
              <el-empty :image-size="200" description="暂无列表"></el-empty>
            </td>
          </tr>
          <tr v-else v-for="(item,index) in  shopList.slice((currentPage1 - 1) * pageSize1, currentPage1 * pageSize1)" :key="index">
            <td><input type="checkbox" v-model="item.active"></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
              <el-input-number v-model="item.count" size="mini" :min="0"></el-input-number>
            </td>
            <td>
              {{item.price*item.count}}
            </td>
            <td>
              <el-button @click="delToshop(index)" type="primary" size="mini">删除</el-button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2">您选中的商品数量是{{selectNumberOf.length}}/{{shopList.length}}</td>
            <td colspan="4">总金额:{{totalprice}}</td>
          </tr>
          <tr>
            <td colspan="6">
              <el-pagination class="pagination" align="center" background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="[1, 5, 10, 20]" :page-size="pageSize1" layout="total, prev, pager, next" :total="shopList.length">
              </el-pagination>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商品名称
      goods: {
        goodsName: '',
        goodsPrice: '',
      },

      //   商品列表
      goodsList: [],
      goodsList1: [],
      //   购物车列表
      shopList: [],
      jt: [],
      search: '',
      // 分页
      currentPage: 1, // 当前页码
      pageSize: 2,// 每页的数据条数
      currentPage1: 1, // 当前页码
      pageSize1: 2 // 每页的数据条数
    }
  },
  mounted() {
    this.goodsList1 = this.goodsList

  },
  computed: {
    isAll: {

      set(val) {
        // 7. 全选框 - 选中状态(true/false)
        if (this.shopList.length > 0) {
          this.shopList.forEach(obj => obj.active = val)
        }

      },
      get() {
        // every口诀: 查找数组里"不符合"条件, 直接原地返回false
        if (this.shopList.length > 0) {
          return this.shopList.every(obj => obj.active == true)
        }

      }
    },

    selectNumberOf() {
      return this.shopList.filter((item) => item.active);
    },
    totalprice() {
      let checkProList = this.shopList.filter(item => {
        return item.active;
      })
      if (checkProList) {
        let newArr = checkProList.reduce((pre, cur) => {
          return pre + cur.price * cur.count;
        }, 0);
        return newArr
      }
    }
  },
  watch: {
    'goodsList1': {
      handler: function (newVal, oldVal) {
        this.jt = newVal
        // console.log(this.jt);
        // console.log("newVal:", newVal);
        // console.log("oldVal:", oldVal);
      },
      // deep: true
    }
  },
  methods: {
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange1(val) {
      this.currentPage1 = 1;
      this.pageSize1 = val;
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
    },
    resve(index) {
      let pro = this.goodsList1[index]
      if (this.shopList.some(r => r.name == pro.name)) return this.$message.error('该商品已放入购物车,不可修改');
      pro.isck = !pro.isck
    },
    searchval() {
      if (!this.search) {

        this.goodsList1 = this.goodsList

      } else {

        this.goodsList1 = this.goodsList.filter(r => r.name == this.search)
      }
    },
    //   全选状态
    select() {
      this.shopList.forEach(obj => obj.active = !obj.active)
    },
    delToAll() {
      const isckAll = this.shopList.every(r => r.active == true)
      if (isckAll == true) {
        this.shopList = []  
      } else {
        this.$message.error('请全部选择后才能删除');
      }
    },
    addProduct() {
      // 非空校验
      if (this.goods.goodsName == '') return this.$message.error('商品名称不能为空');
      if (this.goods.goodsPrice == 0) return this.$message.error('商品价格不能为0');
      // 判断商品列表中是否已存在新的商品
      const pros = this.goodsList.some(r => {
        return r.name == this.goods.goodsName
      })

      if (pros == true) {
        return this.$message.error('该商品已存在');
      } else {
        this.goodsList.push({
          name: this.goods.goodsName,
          price: this.goods.goodsPrice,
          isck: true
        })
        // this.goodsList1 = this.goodsList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        this.$message.success('添加成功');
        this.goods.goodsName = '';
        this.goods.goodsPrice = 0;
      }

    },
    addToCart(name) {

      let addPro = this.goodsList1.find(r => r.name == name)
      let pro = this.shopList.find(r => r.name == addPro.name)
      const isck = this.jt.some(r => r.isck == true)
      if (isck == false) {
        return this.$message.error('请修改完毕后才可添加!')
      }
      if (pro) pro.count++;
      else {
        this.$message.success('添加成功');
        this.shopList.push({
          active: false,
          name: addPro.name,
          price: addPro.price,
          count: 1,
        })
      }
    },
    delToCart(index) {
      let pro = this.goodsList1[index]
      if (this.shopList.some(r => r.name == pro.name)) return this.$message.error('该商品已放入购物车,不可删除');

      this.goodsList1.splice(index, 1)
      this.$message.success('删除成功');
    },
    delToshop(index) {
      const checkProList = this.shopList.filter(item => {
        return item.active;
      })
      // console.log(checkProList);
      if (checkProList.length > 0) {
        this.shopList.splice(index, 1)
        this.$message.success('删除成功');
      } else {
        this.$message.error('请选择后在删除');
      }
      // console.log(isck);

    }
  }
}
</script>
<style scoped lang='scss'>
.goodsBox {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
table {
  width: 100%;
  margin: 10px;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-align: center;
  }
}
.box {
  width: 80%;
  margin: auto;
}
</style>